<template>
  <div style="display: flex;"  :style="{ margin: '24px 16px', padding: '24px' ,backgroundColor:'#FFF' }">
    <a-table size="small" :columns="columnsAdmin" :data-source="admins" :pagination="false" bordered :loading="isloadingAdmin"
             rowKey="adminId" style="flex: 1;margin-right: 10px">
      <template slot="action" slot-scope="row">
        <a-space>
          <a @click="onExpand(row)">查看角色</a>
        </a-space>
      </template>
    </a-table>
    <div style="flex: 1">
      <span class="ant-tag ant-tag-has-color" :class="tipTxt==='请选择要查看角色的管理员'?'noSelect':'select'">
        {{tipTxt}}
      </span>
      <a-table size="small" :row-selection="rowSelection":columns="columnsRole" :data-source="roles" :pagination="false" bordered
                rowKey="roleId" :loading="isloadingRole">
      </a-table>
      <div style="display: flex;justify-content: center;margin-top: 20px ">
        <a-button type="primary" @click="onSubmit">保存修改</a-button>
      </div>
    </div>
  </div>
</template>

<script>
const columnsAdmin = [
  {title: '管理员ID', dataIndex: 'adminId', key: 'adminId',ellipsis: true,},
  {title: '姓名', dataIndex: 'adminName', key: 'adminName'},
  {title: '描述', dataIndex: 'adminDescribe', key: 'adminDescribe'},
  {title: '操作', key: 'action', scopedSlots: {customRender: 'action'}}
];
const columnsRole = [
  {title: '角色Id', dataIndex: 'roleId', key: 'roleId',ellipsis: true,},
  {title: '角色名', dataIndex: 'roleName', key: 'roleName'},
  {title: '角色描述', dataIndex: 'description', key: 'description'},
];


export default {
  name: 'RoleAdmin',
  data() {
    return {
      isloadingAdmin:true,
      isloadingRole:true,
      tipTxt:'请选择要查看角色的管理员',
      admins: [],//所有管理员数据
      selectAdmin:{},//选中的admin
      roles: [],//所有角色数据
      selectRoleId: [],//选中的admin 拥有的角色
      columnsRole,
      columnsAdmin
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys:this.selectRoleId,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectRoleId=selectedRowKeys

        }
      };
    },
  },
  mounted() {
    this.getAllAdmin()
    this.getAllRole()
  },
  methods: {
    getAllAdmin() {
      this.$axios({
        method: 'get',
        url: 'roleAdmin/getAdminAll'
      }).then(res => {
        this.admins = res.data.data
        this.isloadingAdmin=false
      })
    },
    getAllRole() {
      this.$axios({
        method: 'get',
        url: 'roleAdmin/getRoleAll'
      }).then(res => {
        this.roles = res.data.data
        this.isloadingRole=false
      })
    },
    onExpand (record) {
      this.$axios({
        method: 'get',
        url: 'roleAdmin/getSelectRoleId?adminId=' + record.adminId,
      }).then(res => {
        this.selectRoleId = res.data.data
        this.selectAdmin=record
        this.tipTxt='正在修改 {'+ record.adminId+'  '+record.adminName+'} 的角色'
        console.log(this.selectRoleId)
      })
    },
    onSubmit(){
      this.$axios({
        method: 'get',
        url: 'roleAdmin/addRoleOfAdmin?roleIds=' + this.selectRoleId.toString()+'&adminId='+this.selectAdmin.adminId,
      }).then(res => {
        if (res.data.code === "200") {
          this.$message.success('保存成功');
        } else if (res.data.code === -1) {
          this.$message.warning('权限不足');
        } else {
          this.$message.error('保存失败');
        }
      })

    }
  }
}
</script>

<style scoped>
.noSelect{
  background-color: #f50;
  width: 100%;
  font-size: 24px;
  margin-bottom: 10px;
  padding: 5px;
}
.select{
  background-color: #108ee9;
  width: 100%;
  font-size: 24px;
  margin-bottom: 10px;
  padding: 5px;
}
</style>
